﻿@{
    ViewBag.Title = "Ryan Butler.org : ASP.NET MVC Contact Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Creating a <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> Contact Form</h1>
<h3>Adjusting our contact view</h3>
<p>In the <abbr title="Model View Controller">MVC</abbr> paradigm, views are a special type of file that contain <abbr title="Hypertext Markup Language">HTML</abbr> 5 markup, and are capable of
including razor syntax that can be used to work with models.</p>
<p>From the solution explorer, open <span class="special">Contact.cshtml</span> by expanding <span class="special">Views: Home</span>, and then double&#8212;click <span class="special">Contact.cshtml</span>. Remove the initial <abbr title="Hypertext Markup Language">HTML</abbr> 5 markup, once finished, your razor file should look as
illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor1.png")" data-lightbox="image-razor1"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor1.png")" alt="Razor Syntax 1" width="296" height="38" /></a></p>
<p>As you can see from the code above, we assign our title dynamically using the dynamic object ViewBag,
and assign our base template. While in the editor, press F5 to preview your website, which should show
this screen:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/5.png")" data-lightbox="image-5"><img src="@Url.Content("~/content/aspmvcform/thumbs/5.png")" alt="Preview Page" width="207" height="77" /></a></p>
<p>If you left click contact, you should see an empty page as shown below:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/6.1.png")" data-lightbox="image-6.1"><img src="@Url.Content("~/content/aspmvcform/thumbs/6.1.png")" alt="Preview empty page" width="281" height="49" /></a></p>
<p>Once verified, go back to Visual Studio and stop debugging by either pressing the stop button, or pressing
Shift + F5.</p>
<p>Inside our razor file, right below the closing curly brace, add the following:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor2.png")" data-lightbox="image-razor2"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor2.png")" alt="Razor Syntax 2" width="296" height="73" /></a></p>
<p>As you can see from the code above, we added:</p>
<ol>
<li>A heading one tag, to serve as the title to our page</li>
<li>A using statement, followed by Html.BeginForm, which instructs <abbr title="Model View Controller">MVC</abbr> to create an opening &lt;form&gt; and closing &lt;/form&gt; tag.</li>
</ol>
<p>Save your changes. Results should be as illustrated. From the contact screen, right&#8212;click, and choose <span class="special">View Source</span>. In the source of the markup, you’ll see the changes as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/7.png")" data-lightbox="image-7"><img src="@Url.Content("~/content/aspmvcform/thumbs/7.png")" alt="View Source" width="260" height="38" /></a></p>
<h3>Adding model reference to contact.cshtml</h3>
<p>For our form fields to bind the data entered to our model, we need to add a reference to our model from our razor web page. We do this by adding the following snippet to the top of our razor web page:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor3.png")" data-lightbox="image-razor3"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor3.png")" alt="Razor Syntax 3" width="296" height="82" /></a></p>
<p>One item to mention is to make sure to take advantage of code hints in our razor view by first typing
((at)model), then typing the name of our solution, followed by the hierarchy of classes you’re after as
illustrated below:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/10.png")" data-lightbox="image-10"><img src="@Url.Content("~/content/aspmvcform/thumbs/10.png")" alt="View Code Hints" width="250" height="159" /></a></p>
<p>Inside our using block, add the following <abbr title="Hypertext Markup Language">HTML</abbr> markup:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor4.png")" data-lightbox="image-razor4"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor4.png")" alt="Razor Syntax 4" width="262" height="97" /></a></p>
<p>As you can see from the code above, we:</p>
<ol>
<li>Added a DIV with a class of row
<ol type="a">
<li>Inside the div, we used razor’s built-in helper object, <span class="special">Html</span>, and called helper method
label control, and then passed in our model using a lambda expression:
<ol type="i">
<li>Specifying our first public class variable, <span class="special">FirstName</span>, followed by the literal
string, First Name, which will output a label to the screen.</li>
</ol>
</li>
<li>Used razor’s built&#8212;in helper object, <span class="special">Html</span>, and called helper method editor control which
will allow our users to enter a first name in a text field. We then passed in our model
using a lambda expression:
<ol type="i">
<li>Specifying our first public class variable, FirstName.</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Save your changes. Results should be as illustrated in a web browser.</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/11.png")" data-lightbox="image-11"><img src="@Url.Content("~/content/aspmvcform/thumbs/11.png")" alt="Preview results" width="250" height="163" /></a></p>
<p>If we view source on our razor web page, we see the following illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/12.png")" data-lightbox="image-12"><img src="@Url.Content("~/content/aspmvcform/thumbs/12.png")" alt="Code view" width="279" height="30" /></a></p>
<p>As you can see from the illustration above, our helper Html object generated <abbr title="Hypertext Markup Language">HTML</abbr> 5 markup, with the
appropriate attributes. When finished previewing, return to Visual Studio and stop debugging by either
pressing the stop button or pressing Shift + F5.</p>
<p>Inside in our razor view, let’s finish the remaining three form fields by adding the following code:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/razor5.png")" data-lightbox="image-razor5"><img src="@Url.Content("~/content/aspmvcform/thumbs/razor5.png")" alt="Code view" width="300" height="215" /></a></p>
<p>One item to note in the above code is the use of the text area built&#8212;in control. We use this control instead
of our editor to allow our visitor’s more room for entering comments than a traditional text field would
allow.</p>
<p>Save your changes. Results should be as illustrated in a web browser.</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/13.png")" data-lightbox="image-13"><img src="@Url.Content("~/content/aspmvcform/thumbs/13.png")" alt="Code view" width="250" height="180" /></a></p>
<p>As you can from the illustration above our form from a graphical user interface (GUI) perspective is
essentially finished. Once finished, return to Visual Studio and stop debugging by pressing the stop button
or by pressing Shift + F5. Let’s tackle some cascading style sheets (CSS) changes to adjust the look and
feel a bit better.</p>
<p>We'll continue by adjusting our <abbr title="Cascading Style Sheets">CSS</abbr> @Html.ActionLink("next","Index3").</p>
<p><a href="#top">top of page</a></p>